<template>
<div>
  <div class="fs-24 f-bold f-primary mt-20 mb-30">案例3：黑龙江省智慧工会系统上云及应用改</div>
  <div class="flex-row">
    <div class="left-row flex-1 pr-20">
      <div class="section-title flex-row flex-row-center p-20 mb-20">
        <div class="text-center ml-20 mr-40 w100">
          <img src="@/assets/images/icon/ic-case01.png" alt="">
          <div class="fs-20 f-primary f-bold lh-28" >业务挑战</div>
        </div>
        <div class="fs-14 f-normal lh-28 flex-1">
          <div><span class="f-bold">客户名称：</span>{{name}} </div>
          <div><span class="f-bold">上云类型：</span>{{type}}</div>
          <div><span class="f-bold">案例概况：</span>{{survey}}</div>
        </div>
      </div>
      <div class="section-title flex-row flex-row-center  p-20 mb-20">
        <div class="text-center ml-20 mr-40 w100">
          <img src="@/assets/images/icon/ic-case02.png" alt="">
          <div class="fs-20 f-primary f-bold lh-28" >解决方案</div>
        </div>
        <div class="fs-14 f-normal lh-28 flex-1">
          <div><span class="f-bold">建设模式：</span>{{plan}}</div>
          <div><span class="f-bold">主要工作内容：</span></div>
          <div><span class="f-primary">问题定位：</span>{{content1}}</div>
          <div><span class="f-primary">解决方案：</span>{{content2}}</div>
          <div><span class="f-primary">项目实施：</span>{{content3}}</div>
        </div>
      </div>
      <div class="box text-center">
        <img :src="img" class="mt-10 mb-15">
      </div>
    </div>
    <div class="left-row flex-1 pl-20">
      <div class="section-title"><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例成果</div>
      <div class="box h-box mt-20 mb-20">
        <div class="f-normal fs-14" style="width: 460px">
          <div class="mb-30">{{need}}</div>
          <div>{{need2}}</div>
        </div>
        <img class="bg" src='@/assets/images/case/bg-1.png'/>
      </div>
      <div class="section-title "><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例价值</div>
      <div class="box h-box mt-20  mb-20">
        <div class="fs-24 f-primary " style="width: 480px">{{worth}}</div>
        <img class="bg" src='@/assets/images/case/bg-2.png' width="300"/>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    name: 'page1',
    data () {
      return {
        img:require('@/assets/images/case/pic-2-2.png'),
        name: '黑龙江省总工会',
        type: '去IOE （ L1级别）',
        survey: '使用集团自研TeleDB数据库替换现有oracle，并对应用进行相应改造，提升系统稳定性、可用性和安全性。',
        plan: '问题定位+自主实施+合作服务',
        content1: '经专家团队调研讨论问题定位为数据库频发故障，主机存在较多安全漏洞，且部署在客户自有机房，有网络安全隐患。',
        content2: '系统进行上云改造，将系统部署在天翼云，使用集团自研TeleDB数据库替换现有oracle，并对应用进行相应改造。',
        content3: '省公司PAAS团队负责上云方案制定、天翼云公网云资源的开通、TeleDB数据库安装部署等工作，系统集成公司自主研发团队负责应用改造工作。',
        need: '为客户解决疫情慰问管理系统数据库频发性故障、性能瓶颈、运维困难等问题；',
        need2: 'IAAS使用天翼云公网云主机，提供了安全的主机、网络环境确保系统稳定运行，在疫情期间对防疫物资发放提供了有力支撑。',
        worth: '将电信去IOE的平台工具能力和实施经验，输出到行业的成功实践； 为客户带来更经济、更高性能、更具扩展性的数据库解决方案； 提升技术的自主可控能力。'
      }
    }
  }
</script>

<style scoped lang="scss">
  .box{
    padding: 30px 40px;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    &.h-box{
      height: 210px;
    }
    .bg{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  .lh-28{
    line-height: 28px!important;
  }
  .w100{
    width: 100px;
  }
</style>
